<!DOCTYPE html>
<html>

	<head>
		<meta charset="utf-8">
		<meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
		<title>个人资料</title>
		<script src="../js/mui.min.js"></script>
		<link href="../css/mui.min.css" rel="stylesheet" />
		<link rel="stylesheet" href="../css/iconfont.css" />
		<link rel="stylesheet" href="../css/style.css" />
		<link rel="stylesheet" href="../css/member.css" />
		<link rel="stylesheet" href="../css/picker.css" />
		<link rel="stylesheet" href="../css/poppicker.css" />
		<link rel="stylesheet" type="text/css" href="../css/datepicker3.css" />
		<script src="../plugin/crop/croppie.min.js"></script>
		<link rel="stylesheet" href="../css/font-awesome.min.css" />
		<link rel="stylesheet" href="../css/bootstrap.min.css" />

		<style type="text/css">
			.grzl_toux {
				position: relative;
			}
			/*#upload{opacity:0;filter:alpha(opacity=0);height: 95px; width: 100px;position: absolute;top: -80px;left: -40px;z-index: 9;}*/
			/*.btn_thumb{opacity:0;filter:alpha(opacity=0);height: 95px; width: 100px;position: absolute;top: -0px;left: -0px;z-index: 9;}*/
		</style>
	</head>

	<body>
		<header class="mui-bar mui-bar-nav">
			<a class="mui-action-back mui-icon mui-icon-left-nav mui-pull-left"></a>
			<h1 class="mui-title">个人资料</h1>
		</header>
		<div class="mui-content ">
			<div class="gerenzl_nr">
				<form class="mui-input-group gerenzl_group">
					<div class="gerenzl_top img-click">
						<div class="actions">
							<button class="file-btn">
				                <span><i class=" fa fa-plus"></i></span>
				                <input type="file" id="upload" value="选择图片文件" multiple />
				            </button>
							<div id="img_list" class="img_list">
								
						</div>
						<!--<div class="grzl_toux" id="touxiang">
			    		<div id="img_list" class="img_list">
			    			<img id="tupian" src="images/toux.jpg">
			    		</div>
			    		<button class="file-btn" id="btn_thumb" style="opacity:0;filter:alpha(opacity=0);height: 95px; width: 100px;position: absolute;top: -0px;left: -0px;z-index: 9;">
			                <span><i class=" fa fa-plus"></i></span>   
			                <input type="file" id="upload" name="upload" value="选择图片文件" style=" "multiple />
			          </button>
			    	</div>-->
						<div>头像</div>
					</div>
					<div style="height:5px;background-color: #EFEFF4;"></div>
					<div class="mui-input-row ">
						<label>昵称</label>
						<input type="text" id="nick_name" class="mui-input-group" placeholder="请填写昵称">
					</div>
					<div class="mui-input-row">
						<label>真实姓名</label>
						<input type="text" id="real_name" class="mui-input-group" placeholder="请输入您的真实姓名">
					</div>
					<div class="mui-input-row">
						<label>性别</label>
						<select class="mui-btn mui-btn-block" id="sex">
							<option value="1">男</option>
							<option value="2">女</option>
						</select>
					</div>
					<div class="mui-input-row">
						<label>生日</label>
						<!--<input type="text"  name="birthday" id="birthday" class="datetimepicker" id="datetimepicker">-->
						<input type="text" name="birthday" id="birthday" class="datetimepicker" id="datetimepicker">
					</div>
					<div class="mui-input-row">
						<label>手机</label>
						<input type="text" id="mobile" class="mui-input-group" placeholder="请输入您的手机号码">
					</div>
					<div class="mui-input-row">
						<label>职业</label>
						<input type="text" id="position" class="mui-input-group" placeholder="请输入您的职业">
					</div>
					<div class="mui-input-row">
						<label>城市</label>
						<input type="text" id="city" readonly="readonly" class="mui-input-group" placeholder="请选择地区">
					</div>
					
				</form>
				<div class="gerzl_btn" id="btn" onclick="sub()">
					<a href="#">保存</a>
				</div>
			</div>
			<input type="hidden" id="member_id" >
			<!--<input type="hidden" id="gui" value="1">-->
		</div>

	</body>

</html>
<script type="text/javascript" src="../js/jquery.min.js"></script>
<script type="text/javascript" src="../js/bootstrap-datepicker.js"></script>
<script src="../js/layer/layer.min.js"></script>
<script src="../js/castapp.js"></script>
<script src="../js/app.js"></script>
<script src="../js/picker.js"></script>
<script src="../js/poppicker.js"></script>
<script src="../js/city.data-3.js"></script>
<script src="../js/bootstrap.min.js"></script>
<script>
	var member=JSON.parse(localStorage.getItem('member'));
	$(function() {
		$(".datetimepicker").datepicker({
			language: "zh-CN",
			autoclose: true, //选中之后自动隐藏日期选择框
			clearBtn: true, //清除按钮
			todayBtn: true, //今日按钮
			format: "yyyy-mm-dd" //日期格式，详见 http://bootstrap-datepicker.readthedocs.org/en/release/options.html#format
		});
		$('#upload').on('change', function() {
			readFile(this, "thumb", 1);
			$(".file-btn").hide();
		});

	});
	//获取个人资料
	$.ajax({
			type: 'post',
			url: APP.api_url + 'Member/perfect',
			data: {
				'id':member['id'],
			},
			dataType:'jsonp',
			success: function(data) {
				var list=data.data;
				if(data.data.head_img){
					var img=1;
					var innerHTML = '<div class="images-item">' +
					'	<span class="del">×</span>' +
					'	<img style="width: 80px;height: 80px; margin:0 auto;" src="' + APP.pic_url + data.data.head_img + '"/>' +
					'	<input id="pic'+img+'" type="hidden" name="'+name+'" value="'+data.data.head_img+'" />'+
					'	<input id="p" type="hidden" name="'+name+'1" value="'+img+'" />'+
					'</div>';
					$("#img_list").append(innerHTML);
					del_event();
					if($("#img_list").find('.images-item').size() >= length){
						$("#upload").parent(".file-btn").hide();
					}}
				
				$('#nick_name').val(list['nick_name']);
				$('#real_name').val(list['real_name']);
				$('#sex').val(list['sex']);
				$('#birthday').val(list['birthday']);
				$('#position').val(list['position']);
				$('#mobile').val(list['mobile']);
				$('#city').val(list['address']);
//				$('#img_list').append('<img src='+APP.pic_url+list['head_img']+' />');
			}
		});
//提交更新资料
	function sub(){
		img=$('#pic1').val();
		$.ajax({
			type: 'post',
			url: APP.api_url + 'Member/update',
			data: {
				'id':member['id'],
				'nick_name':$('#nick_name').val(),
				'real_name':$('#real_name').val(),
				'sex':$("#sex").val(),
				'birthday':$('#birthday').val(),
				'mobile':$("#mobile").val(),
				'position':$("#position").val(),
				'city':$('#city').val(),
				'img':img
			},
			dataType:'jsonp',
			success: function(data) {
				layer.msg(data.msg, {icon: 1,time:1500,shade: 0.1}, function(index){
					localStorage.setItem('member', JSON.stringify(data.member));
                    window.location.href="";
                   });

			}
		});
	}
			//地址插件
		ca.init();
		var btn = ca.id('btn');
		var input = ca.tagName('input');
		var dis = ca.id('city');
		dis.addEventListener('tap', function() {
		castapp.combinationSelect(3, cityData3, function(arr) {
			dis.value = arr;
		});
	})
	

		
</script>